<template>
    <div>
        <div class="back">
            <span class="iconfont icon-xiangzuojiantou left" @click="back"></span>
            <span class="navTitle">MV视频</span>
        </div>
        <div class="videoBox">
            <video class="vd" :src="videoUrl" autoplay="autoplay" controls="controls" width="100%"></video>
        </div>
        <van-tabs animated>
            <van-tab :title="'详情'">
                <!-- 内容 {{ index }} -->
                <div class="MVcontent">
                    <div class="vtitle">
                        <h4>{{songname}}</h4>
                        <p class="vname">{{singername}}</p>
                        <p class="vrem">{{vrem}}</p>
                    </div>
                </div>
                <div class="checkBtn">
                    <span class="iconfont icon-dianzan" v-show="dzt==0" @click="dzBtn"></span>
                    <span class="iconfont icon-dianzan1 dz1" v-show="dzt==1" @click="dzBtn"></span>
                    <span class="iconfont icon-shoucang" v-show="MVt==0" @click="scBtn"></span>
                    <span class="iconfont icon-shoucangxuanzhong dz2" v-show="MVt==1" @click="scBtn"></span>
                </div>
                <!-- 相似MV -->
                <div class="MVbox">
                    <div class="MVboxTitle">相似MV</div>
                    <div class="box" v-for="item in mvs" :key="item.id" @click="getNewId(item.id)">
                        <div class="MVimg">
                            <img :src="item.cover">
                        </div>
                        <div class="MVtext">
                            <h4>{{item.name}}</h4>
                            <p>演唱: {{item.artistName}}</p>
                            <p class="playcont"><span class="iconfont icon-bofang1 bf1"></span>{{item.playCount|playCountData}}</p>
                        </div>
                    </div>
                </div>
            </van-tab>

            <van-tab :title="'评论(20)'">
                <!-- 内容 {{ index }} -->
                <div class="discuss" v-for="item in comments" :key="item.commentId">
                    <div class="discussBox">
                        <div class="discussImg">
                            <img :src="item.user.avatarUrl" alt="">
                        </div>
                        <div class="disContent">
                            <h4>{{item.user.nickname}}</h4>
                            <p class="time">{{item.timeStr}}</p>
                            <p>{{item.content}}</p>
                        </div>
                    </div>
                    <div class="likebtn">
                        <span>{{item.likedCount}}</span>
                        <span class="iconfont icon-dianzan dz" v-show="item.liked==false" @click="likeCheck(item.commentId,item.liked)"></span>
                        <span class="iconfont icon-dianzan1 dz1" v-show="item.liked==true" @click="likeCheck(item.commentId,item.liked)"></span>
                    </div>
                    
                </div>

            </van-tab>
        </van-tabs>
        <div class="comment">
            <div class="commentBox">
                <div class="input">
                    <input type="text" v-model="value" @keydown.enter="send" placeholder="发表评论">
                </div>
                <div class="commentBtn" @click="send">发送</div>
            </div>
        </div>
    </div>
    



</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import { Toast } from 'vant';

import {getResourceLike,getMvSub,getMvDetail,getMvUrl,getCommentMv,getCommentLike,getComment,getSimiMv} from '../../api/MV'

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data(){
        return{
            videoUrl:null,
            id:null,// 当前MVid
            songname:null,
            singername:null,
            vrem:null,
            check:null,// 点赞按钮
            comments:[],
            t:null,
            value:null,// 发送评论
            mvs:[],// 相似MV
            MVt:0,// MV类型
            dzt:0,// MV点赞
        }
    },
    methods:{
        // MV点赞按钮
        dzBtn(){
            this.dzt = this.dzt==1?0:1;
            if(this.dzt ==1){
               Toast("点赞成功") 
            }else{
               Toast("取消点赞") 
            }
            this.getResourceLikeFun();
        },
        // MV点赞接口
        getResourceLikeFun(){
            getResourceLike({id:this.id,type:1,t:this.dzt}).then(data=>[
                console.log(data)
            ])
        },
        // 收藏按钮
        scBtn(){
            this.MVt = this.MVt == 1? 0:1;
            if(this.MVt ==1){
               Toast("收藏成功") 
            }else{
               Toast("取消收藏") 
            }
            this.getMvSubFun();
        },
        // 获取收藏MV接口
        getMvSubFun(){
            getMvSub({mvid:this.id,t:this.MVt}).then(data=>{
                console.log(data)
            })
        },
        // 获取相似MVID
        getNewId(id){
            this.id = id;
            this.getMvDetailFun();// 视频数据
            this.getMvUrlFun();// 视频链接
            this.getCommentMvFun();// 视频评论 
            this.getSimiMvFun();// 获取相似MV
        },
        // 相似MV
        getSimiMvFun(){
            getSimiMv({mvid:this.id}).then(data=>{
                this.mvs = data.mvs
                console.log('相似MV',this.mvs)
            })
        },
        // 发送评论
        send(){
            this.getCommentFun();
            this.value = '';
        },
        // 发送评论接口
        getCommentFun(){
            getComment({t:1,type:1,id:this.id,content:this.value}).then(data=>{
                console.log(data)
            })
        },
        // // 评论输入框显示隐藏
        // toggle(e){
        //     // this.check = this.check==true?false:true;
        //     console.log(e.target)
        // },
        // 点赞评论
        likeCheck(id,liked){
            console.log(id)
            this.t = liked==true?0:1;
            // this.check = !this.check;
            console.log(this.t)
            this.getCommentLikeFun(id)
        },
        // 返回上一页
        back(){
            this.$router.go(-1)
        },
        // 评论点赞
        getCommentLikeFun(id){
            getCommentLike({id:this.id,cid:id,t:this.t,type:1}).then(data=>{
                console.log(data)
            })
        },
        // 获取视频评论
        getCommentMvFun(){
            getCommentMv({id:this.id}).then(data=>{
                // console.log('评论',data)
                this.comments = data.comments
                console.log('评论',data.comments)
            })
        },
        // 获取视频数据
        getMvDetailFun(){
            // console.log(this.mvplayId)
            getMvDetail({mvid:this.id}).then(data=>{
                console.log(data)
                this.songname = data.data.name;
                this.singername = data.data.artistName
                this.vrem = data.data.desc
            })
        },
        // 获取视频连接
        getMvUrlFun(){
            getMvUrl({id:this.id}).then(data=>{
                console.log(data.data)
                this.videoUrl = data.data.url
            })
        },
        
    },
    created(){
        this.id = this.$route.params.id // 获取视频id
        this.getMvDetailFun();// 视频数据
        this.getMvUrlFun();// 视频链接
        this.getCommentMvFun();// 视频评论 
        this.getSimiMvFun();// 获取相似MV
    },
    // mounted(){
    // }
    filters:{
        playCountData(value){
        let w = value > 10000? value / 10000 : value; // 万计算
        let y = w > 10000? parseInt(w/10000)+"亿": parseInt(w) + "万";//亿计算
        return y;
        }
    },
}
</script>

<style lang="less">
.back{
    height: 50px;
    background-color: #d44439;
    .left{
        line-height: 50px;
        padding: 0px 6px;
        color: white;
    }
    span.navTitle{
        font-size: 18px;
        font-weight: bold;
        margin-left: 34%;
        color: white;
    }
}
.MVcontent{
    width: 90%;
    margin: 20px auto 0px auto;
    background-color: rgb(233, 233, 233);
    border-radius: 20px;
    padding: 10px;
    h4{
        font-weight: bold;
        font-size: 20px;
    }
    p{
        color: #999;
        word-wrap: break-word;
        font-size: 14px;
        line-height: 25px;
    }
}
.checkBtn{
    width: 90%;
    padding: 10px;
    margin: 0px auto;
    span{
        margin-right: 10px;
    }
    .dz1{
        color: red;
    }
    .dz2{
        color: rgb(252, 229, 23);
    }
}
  .MVbox{
    .MVboxTitle{
        font-weight: bold;
        padding: 10px 0px;
        margin: 0px 10px;
        font-size: 18px;
        border-bottom: 1px solid #ccc;
    }
    .box{
        display: flex;
        padding: 10px 0px;
        margin: 0px 10px;
        border-bottom: 1px solid #ccc;

      .MVimg{
        flex: 4;
        margin-right: 10px;
        width: 10%;
        height: 8%;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .MVtext{
        flex: 8;
        h4{
          width: 220px;
          font-size: 18px;
          font-weight: bold;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          // display: inline;
        }
        p{
          font-size: 14px;
          color: #999;
        }
        .playcont{
            font-size: 12px;
          span.bf1{
            font-size: 12px;
          }
        }
      }
    }
  }
.discuss{
    position: relative;
    padding: 0px 10px;
    margin: 15px 0px;
    .discussBox{
        display: flex;
        // align-items: center;
        .discussImg{
            width: 60px;
            height: 60px;
            background-color: pink;
            border-radius: 50%;
            margin-right: 20px;
            // margin-top: 10px;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .disContent{
            width: 75%;
            h4{
                font-weight: bold;
            }
            p{
                width: 90%;
                color: #999;
                font-size: 14px;
                word-wrap:break-word;
            }
            p.time{
                font-size: 12px;
            }
        }
    }
    .likebtn{
        position: absolute;
        top: 10px;
        right: 20px;
        .dz1{
            color: red;
        }
    }
}
.comment{
        position:fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 20;
        .commentBox{
            display: flex;
            padding: 11px 10px;
            // background-color: #d44439;
            justify-content: space-between;
            .input{
                width: 85%;
                input{
                    width: 100%;
                    height: 100%;
                    border: none;
                    font-size: 14px;
                    padding: 0px 5px;
                }
            }
            .commentBtn{
                margin-right: 5px;
                color:#ccc;
                // background-color: rgb(39, 221, 79);
                font-size: 14px;
                padding: 5px 10px;
            }
        }
    }

</style>